<template>
  <div id="indexPage">
    <div class="margin-16">
      <a-input-search
          v-model:value="searchText"
          size="large"
          placeholder="搜索表情"
          enter-button
          @search="handleSearch"
      />
    </div>
    <a-row>
      <a-col>
        <a-tabs type="card" v-model:active-key="activeTag.name" @tabClick="handleSearchTag">
          <a-tab-pane v-for="(item,index) in tags" :key="item.name" :tab="item.name"/>
        </a-tabs>
      </a-col>
    </a-row>
    <a-list :grid="{ gutter: 8, column: 8}"  :dataSource="data">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-skeleton active :loading="loading" :avatar="{shape: 'square', size: 200}">
          <img :title="item.name" :alt="item.name" :src="item.url" class="picture" @click="doShowEditModal(item)">
        </a-skeleton>
      </a-list-item>
    </a-list>
    <a-pagination
              v-model:current="current"
              :pageSize="pageSize"
              :total="pictureList.length"
              style=" text-align: center"
              @change="doPageChange"
    />
    <PictureEditModal :picture="picture" :visible="showPicture" :onClose="closeEditModal"/>
    <a-back-top/>
  </div>
</template>

<script>
import {Material} from "vue-color";
import {mapState} from 'vuex'
import PictureEditModal from "@/components/PictureEditModal";
import enums from '@/constant/ EmojiReviewStatusEnum'
export default {
name: "Emoji",
  components:{
    PictureEditModal,
    "material-picker": Material,
  },
  data(){
  return{
    searchText:'',
    pictureList:[],
    loading: true,
    current:1,
    pageSize:20,
    total:0,
    activeTag:{
      name:''
    },
    picture:{},
    showPicture:false
  }
  },
  methods:{
  //分页跳转
    doPageChange(val){
      this.pageNumber=val
    },
  //查询全部表情
   async getData(){
     this.loading = true
      const result=await this.$API.findAll(enums.REVIEW_PASS)
      if (result.code==10000){
        this.pictureList=result.data
        this.loading = false
      }else {
        this.$message.error('获取表情失败，请重试');
      }
    },
    //搜索表情
    async handleSearch(){
      this.loading = true
        const result= await this.$API.findByKey(this.searchText)
        if (result.code==10000){
          this.pictureList=result.data
          this.total=result.data.length
          this.loading = false
        }else {
          this.$message.error('获取表情失败，请重试');
        }
    },
    //通过标签搜索表情
    async handleSearchTag(tab){
      this.loading = true
      this.activeTag.name=tab
      let result=await this.$API.findByTag(this.activeTag)
      if (result.code==10000){
        this.pictureList=result.data
        this.total=result.data.length
        this.loading = false
        this.activeTag.name=''
      }else {
        this.$message.error('获取表情失败，请重试');
      }
    },
    //弹出剪切窗口
    doShowEditModal(item){
      this.showPicture=true
      this.picture=item
    },
    closeEditModal(){
      this.showPicture=false
    }
  },
  mounted() {
  this.getData()
    this.$store.dispatch('getAllTags')
  },
  computed: {
    data() {
      return this.pictureList.slice((this.current - 1) * this.pageSize, this.current * this.pageSize)
    },
    ...mapState({
      tags:state => state.tag.tags
    })
  }
  }
</script>

<style scoped>
.picture {
  width: 150px;
  height: 140px;
}
</style>
